<template>
    <div class="addCategory">
        <div class="formBox">
            <div class="icon">
                <a-icon type="edit" theme="twoTone" />
                <span class="word">添加类别</span>
            </div>
             <a-spin :spinning="spining">
                <div class="content">
                    <ul>
                        <li>
                            <span class="title">分类名 : </span><a-input placeholder="请输入分类名" allowClear v-model="name" size="large"></a-input><span class="need">*</span>
                        </li>
                        <li>
                            <span class="title">属性名1:</span><a-input placeholder="请输入属性名" allowClear v-model="property1" size="large">
                                    <a-icon slot="suffix" type="plus" @click="addProperty(1)" v-show="oneShow"/>
                                </a-input><span class="need">*</span>
                        </li>
                        <li v-show="!oneShow">
                            <span class="title">属性名2:</span><a-input placeholder="请输入属性名" allowClear v-model="property2" size="large">
                                    <a-icon slot="suffix" type="plus" v-show="!twoShow" @click="addProperty(2)"/>
                                </a-input><span class="moveright"><a-icon type="minus" @click="minusProperty(2)"/></span>
                        </li>
                        <li v-show="twoShow">
                            <span class="title">属性名3:</span><a-input placeholder="请输入属性名" allowClear v-model="property3" size="large">
                                </a-input><span class="moveright"><a-icon type="minus" @click="minusProperty(3)"/></span>
                        </li>
                        <li>
                                <span class="title">分类状态:</span> 
                                <span class="moveright">
                                    <a-switch checkedChildren="上线"  unCheckedChildren="下线"   defaultChecked  v-model="states" @change="onChange"/>
                                </span>
                        </li>
                        <li>
                                <span class="title">分类排序:</span> 
                                <a-input-number allowClear v-model="sort" size="large" >
                                </a-input-number>
                        </li>
                    </ul>
                    <div class="btns">
                        <a-button type="primary" size="large" @click="addCategory">添加</a-button>
                    </div>
                </div>
             </a-spin>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import qs from "qs";
    export default{
        data(){
            return{
                name:"",
                property1:"",
                property2:"",
                property3:"",
                oneShow:true,
                twoShow:false,
                states:false,
                sort:0,
                spining:false
            }
        },
        methods:{
            addProperty:function(a){
                if(a==1){
                    this.oneShow=false
                }else if(a==2){
                    this.twoShow=true
                }
            },
            minusProperty:function(num){
                if(num==3){
                    this.twoShow=false;
                    this.property3="";
                }else if(num==2){
                    this.twoShow=false;
                    this.property3="";
                    this.oneShow=true;
                    this.property2="";
                }
            },
            onChange:function(checked){
                this.states = checked;  
            },
            addCategory:function(){
                if(this.name=="")
                {
                    this.$message.error('请输入分类名');
                    return;
                }
                else if(this.property1==""){
                     this.$message.error('至少需要一个分类标签');
                    return;
                }else if(this.property3!="" && this.property2==""){
                    this.$message.error('需要属性名2');
                    return;
                }

               
                this.spining = true;
                 let params={
                    name:this.name,
                    states:this.states==true?1:0,
                    sort:this.sort==null?0:this.sort,
                    property1:this.property1,
                    property2:this.property2,
                    property3:this.property3
                }
                console.log(params);
                axios.post(this.GLOBAL_.apiUrl+'10001',JSON.stringify(params)).then(
                    res=>{
                        console.log(res);
                        this.spining = false;
                        if(res.data.code==1){
                            this.$message.success("添加成功");
                            this.name="";
                            this.sort=1;
                            this.property1=this.property2=this.property3="";
                            this.oneShow=true;
                            this.twoShow=false;
                        }else if(res.data.code==2){
                            this.$message.error(res.data.msg);
                        }
                    }
                )

            }
        }
    }
</script>

<style scoped lang="less">
    .addCategory{
        width:94%;
        margin:6em auto;
        background:#fff;
        .formBox{
            width:60%;
            padding-top:1em;
            margin:1em auto;
            .icon{
                height:32px;
                display: flex;
                align-items: flex-end;
                 .anticon {
                    margin-right: 6px;
                    font-size: 32px;
                 }
                 .word{
                    color:#666;
                    font-size:24px;
                    line-height: 24px;
                    margin-left:10px;
                    display:inline-block;
                    
                 }
            }
            .content{
                margin-top:1em;
                .btns{
                    width:200px;
                    margin:20px auto;
                    padding-bottom:40px;
                }
                ul{
                    list-style:none;
                    li{
                        margin-top:20px;
                        .moveright{
                            margin-left:10px;
                        }
                    }
                }
                .title{
                        font-size:16px;
                        color:#999;
                        font-weight: bold;
                    
                }
                .need{
                    color:red;
                     margin-left:10px;
                }
                .ant-input-affix-wrapper{
                    width:70%;
                    margin-left:10px;
                }
            }
        }
    }
    
</style>